<template>
	<div class="lunbo swiper">
		<div class="lunbo-top">
			<h3>小众种草</h3>
			<h4>游侠客独一无二的旅行体验</h4>
		</div>
		<ul class="swiper-wrapper">
			<li class="lunbo-img swiper-slide" v-for="item in list" :key="item.id" :style="'background-image:url('+item.img+')'">
				<p>{{item.title}}</p>
				<p>{{item.txt}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	export default {
		name: 'Lunbo',
		data(){
			return{
				list:[
					{id:1,img:'lunboimg/1.jpg',title:'银杏特辑',txt:'醉美银杏观赏地'},
					{id:2,img:'lunboimg/2.jpg',title:'红叶季',txt:'邂逅浪漫红叶'},
					{id:3,img:'lunboimg/3.jpg',title:'向野房车',txt:'新型旅行方式'},
					{id:4,img:'lunboimg/4.jpg',title:'徒步赏秋',txt:'寻觅撩人秋色'},
					{id:5,img:'lunboimg/5.jpg',title:'游侠人文',txt:'诗行江南'},
					{id:6,img:'lunboimg/6.jpg',title:'野奢帮',txt:'宿于山海中'},
				]
			}
		},
		setup() {
			onMounted(() => {
				new Swiper('.lunbo', {
					slidesPerView:3
				})
			})
		}
	}
</script>

<style scoped>
	.lunbo{
		width: 100%;
		height: 6rem;
	}
	.lunbo-top{
		width: 100%;
		background-color: white;
		height: 1.14rem;
	}
	.lunbo-top h3{
		font-weight: bold;
		font-size: .4rem;
		float: left;
		width: 30%;
		line-height: 1.14rem;
		text-indent: 1em;
	}
	.lunbo-top h4{
		margin-left: .5rem;
		font-size: .4rem;
		float: left;
		text-align: center;
		height: .6rem;
		margin-top: .3rem;
		color: #ff9e51;
		border-radius: .2rem;
		background-color: #fff3ea;
		line-height: .6rem;
		padding-left: .3rem;
		padding-right: .3rem;
	}
	.lunbo ul li{
		float: left;
		margin-left: 0.1rem;
		width:30% ;
		background-size: 100% 100%;
		height: 4.8rem;
		background-repeat: no-repeat;
		position: relative;
		border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
		background-image: url(../../../../public/lunboimg/1.jpg);
	}
	.lunbo-img p:first-child{
		font-size: 0.4rem;
		color: white;
		position: absolute;
		bottom: 1rem;
		text-align: center;
		width: 100%;
		font-weight: bold;
	}
	.lunbo-img p:last-child{
		font-size: 0.4rem;
		color: white;
		position: absolute;
		bottom: 0.4rem;
		width: 100%;
		text-align: center;
	}
</style>
